@import '../../css/Variable.styl'

.toDo
  display flex
  flex-direction column
  margin standardSpacing

  &__new
    display flex
    flex-direction column
    margin-bottom standardSpacing
    margin-top standardSpacing

    &__toDoText
      display flex
      flex-direction column
      margin-top standardSpacing

      & > textarea
        border none
        border-radius standardBorderRadius
        padding textSpacing
        &:disabled
          border borderStyle

    &Button
      align-self flex-end
      margin-bottom standardSpacing
  &__progressBar
    height textSpacing
    background-color fontColor
    transition 0.5s
    &_container
      background-color lightGrey1
      flex 1
      margin 0px pageSpacing

  &__title
    &_container
      display flex
      align-items center

  &Item
    display flex
    background-color offWhite
    min-height headerHeight
    justify-content flex-start
    align-content center
    align-items center
    padding standardSpacing
    &__checkbox
      font-size titleFontSize
      margin-inline-end textSpacing
      &:focus
        outline none
    &__delete:focus
      outline none
    &__timedEvent
      flex 1
    &__content
      flex 6
      align-items baseline
      overflow hidden
      text-overflow ellipsis
      &__navigation
        display flex
        justify-content space-between
        margin-inline-end standardSpacing
        font-weight bold
        & > *
          color fontColor
          font-size metadataFontSize
          &:hover
            color fontColor
            text-decoration underline
      &__task
        unicode-bidi plaintext
      & strong
        unicode-bidi plaintext
    &Checked
      color darkGrey2
      background repeating-linear-gradient(25deg, lightGrey2, lightGrey2 5px, white 5px, white 10px)
      & *
        color darkGrey2
